<template>
  <div class="groupDiv" v-if="this.reportContentGraduate">
    <div class="chatDiv" v-for="item in this.reportContentGraduate" :key="item.reportId">
      <div style="display:inline-block; width:50px; height:auto; padding:0; 
      margin-left:5px; border:0px; background-color:rgb(237,237,237)">
        <img alt="" class="myHeadIcon" v-bind:src="item.avatar">
        <label class="name">{{item.userName}}</label>
        <!-- <div class="place" >{{item.year}}年第{{item.week}}周</div> -->
      </div>
      <span class="triangle"></span>
      <div class="content"
      @touchstart="touchstart(item)" @touchmove="touchmove()" @touchend="touchend()">
        <div class="content-detail" :style="{background:(changeColor && item === temp?'#aeaeae':'white')}" >
          <span class="tag" >回顾总结</span><br>
          <div>
            <p>{{item.review}}</p>
          </div>
          <span class="tag">给实验室的建议</span><br>
          <div>
            <p>{{item.suggest}}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {Confirm} from 'vux'
  import {mapState} from 'Vuex'
  import {compareByProp} from 'utilMethods/sort'
  import group from 'api/group'
  import year from 'api/year'

  export default {
    name: 'graduateView',
    data () {
      return {
        // 长按事件相关
        temp: {},//长按选中的内容
        startX:'',
        startY:'',
        changeColor:false,//选中变色
        //其它
        isShowConfirm: false,// 是否显示弹窗
        isMe:false,//只能是自己的周报才允许长按编辑
      }
    },
    computed: {
      ...mapState({
        userInfo: state => state.user.userInfo
      }),
      ...mapState(['reportContentGraduate']),
    },
    components: {
      Confirm
    },
    methods: {
      back () {
        this.$router.go(-1)
      },
      touchstart (item) {
        if(item.userId === this.userInfo.userId) {
          this.isMe = true
        }else{
          this.isMe = false
        }
        if(!this.isMe){return}
        this.temp = item
        this.changeColor = true
        this.timeOutEvent = 0
        this.timeOutEvent = setTimeout(this.longPress, 300)
        this.startX = event.changedTouches[0].pageX
        this.startY = event.changedTouches[0].pageY
      },
      touchmove () {
        if(!this.isMe){return}
        this.changeColor = false
        // event.preventDefault()
        var moveEndX = event.changedTouches[0].pageX
        var moveEndY = event.changedTouches[0].pageY
        var X = moveEndX - this.startX
        var Y = moveEndY - this.startY
        //允许小的滑动
        if ( Math.abs(X) > 2 && Math.abs(Y) > 2) {
          clearTimeout(this.timeOutEvent)// 清除定时器
          this.timeOutEvent = 0
        }
      },
      touchend () {
        if(!this.isMe){return}
        // event.preventDefault()
        this.changeColor = false
        if (this.timeOutEvent <= 500) {
          clearTimeout(this.timeOutEvent)
        }
      },
      longPress () {
        this.changeColor = false
        this.timeOutEvent = 0
        this.isShowConfirm = true
      }

    },
  }
</script>
<style lang="less" scoped>

  // .content-detail p{
  //   margin-left: 1px;
  //   margin-bottom: 5px;
  //   margin-top:10px;
  //   letter-spacing:0.5px;
  //   color: grey;
  //   font-size: small;
  //   font-family: '微软雅黑';
  //   letter-spacing:0.5px;
  //   margin: 5px
  // }

  // .content-detail p span{
  //   font-size:small;
  //   color: rgb(191,191,191);
  // }


</style>
